<template>
  <bottom-dialog ref="dialog" :dark="dark" :on-dismiss="onDismiss">
    <div class="btn-wrap" @click.stop="">
      <div class="btn-group">
        <div class="btn-item"
             v-for="(item,index) in items"
             :key="index"
             :style="item.style"
             @click.stop="itemClick(index)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="btn-group btn-item btn-cancel" @click.stop="close">取消</div>
    </div>
  </bottom-dialog>
</template>

<script>
import {ref} from 'vue'
import BottomDialog from "@/components/common/dialog/BottomDialog";


export default {
  name: "ChooseDialog2",
  components: {
    'bottom-dialog': BottomDialog
  },
  props: {
    dark: Boolean,
    onDismiss: Function,
    items: Array,
    onItemClick: Function,
  },
  setup(props) {
    const {dark, items, onDismiss, onItemClick} = props;
    const dialog = ref()
    const close = () => {
      dialog.value.dismiss()
    }
    const itemClick = index => {
      close()
      if (onItemClick) {
        onItemClick(index)
      }
    }
    return {
      dark,
      onDismiss,
      dialog,
      items,
      itemClick,
      close,
    }
  }
}
</script>

<style lang="less" scoped>
@import "/src/utils/style/color";

.btn-wrap {
  padding: 0 15px 12px 15px;
}

.btn-group {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 3px 1px @shadow-color;
}

.btn-item {
  height: 46px;
  text-align: center;
  color: @global;
  font-size: 15px;
  line-height: 46px;
  border-bottom: 1px solid @gray2;
}

.btn-item:last-child {
  border-bottom: none;
}

.btn-cancel {
  margin-top: 12px;
  color: @gray1;
}
</style>
